<template>
	<view class="container">
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="iconfont icon-search" style="color: #9CA4AF;font-size: 20px;"></text>
				<input type="text" class="search-input" placeholder="搜索软件名称、功能..." v-model="searchQuery"
					@input="onInput" />
				<button class="search-button" @click="handleSearch">搜索</button>
			</view>
		</view>
		<view class="search-suggestions" v-if="isTyping && suggestions.length > 0">
			<view class="suggestion-list">
				<view v-for="(item, index) in suggestions" :key="index" class="suggestion-item"
					@click="selectSuggestion(item)">
					<text class="fas fa-search suggestion-icon"></text>
					<text class="suggestion-text">{{ item }}</text>
				</view>
			</view>
		</view>
		<view class="search-results-section" v-if="!isTyping && searchResults.length > 0">
			<view class="results-header">
				<text class="section-title">搜索结果</text>
				<text class="result-count">找到 {{ searchResults.length }} 个结果</text>
			</view>
			<scroll-view>
				<view v-for="(item, index) in searchResults" :key="index" class="search-result-card"
					@click="goToDetail(item.id)">
					<view class="result-content">
						<image class="logo-wrapper" :src="getFullImageUrl(item.mainImageUrl)" mode="aspectFit" />
						<view class="result-details">
							<view>
								<text class="result-name">{{ item.title }}</text>
								<text class="result-desc">{{ item.description }}</text>
							</view>
							<view class="info-group">
								<tui-rate active="#FACC15" :size="15" :current="item.rating" disabled
									:score="item.rating" />
								<text class="extra-info-text">{{ item.pkgSize }}</text>
								<text class="extra-info-text">{{ item.dcount }}次下载</text>
							</view>
							<view class="tag-list">
								<text v-for="(tag, i) in item.tags" :key="i"
									:class="['tag-item', getTagClass(tag.color)]">
									{{ tag.text }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view style="text-align: center;padding: 20rpx;color: #999;font-size: 14px;">
					<text v-if="pageInfo.loading" class="loading-text">正在加载...</text>
					<text v-if="pageInfo.noMore" class="loading-text">没有更多了</text>
				</view> -->
			</scroll-view>
		</view>
		<view v-if="!isTyping && searchResults.length === 0">
			<view class="hot-searches-section">
				<text class="section-title">热门搜索</text>
				<view class="hot-tag-list">
					<text v-for="(tag, index) in hotSearches" :key="index"
						:class="['hot-tag', getHotTagClass(tag.color)]" @click="selectSuggestion(tag.text)">
						{{ tag.text }}
					</text>
				</view>
			</view>
			<view class="history-section">
				<view class="history-header">
					<text class="section-title">搜索历史</text>
					<button class="clear-history-button" @click="clearHistory">清空</button>
				</view>
				<view class="history-list">
					<view v-for="(item, index) in searchHistory" :key="index" class="history-item">
						<view class="history-text-group" @click="selectSuggestion(item)">
							<text class="fas fa-history history-icon"></text>
							<text class="history-text">{{ item }}</text>
						</view>
						<text class="fas fa-times remove-icon" @click="removeHistory(index)"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="filter-section">
			<text class="filter-title">筛选条件</text>
			<view class="filter-group">
				<text class="filter-group-title">软件类型</text>
				<view class="filter-options-list">
					<text v-for="(type, index) in filterOptions.types" :key="index"
						:class="['filter-option-tag', { 'active-tag': activeFilters.type === type }]"
						@click="setActiveFilter('type', type)">
						{{ type }}
					</text>
				</view>
			</view>
			<view class="filter-group">
				<text class="filter-group-title">文件大小</text>
				<view class="filter-options-list">
					<text v-for="(size, index) in filterOptions.sizes" :key="index"
						:class="['filter-option-tag', { 'active-tag': activeFilters.size === size }]"
						@click="setActiveFilter('size', size)">
						{{ size }}
					</text>
				</view>
			</view>
			<view class="filter-group">
				<text class="filter-group-title">用户评分</text>
				<view class="filter-options-list">
					<text v-for="(rating, index) in filterOptions.ratings" :key="index"
						:class="['filter-option-tag', { 'active-tag': activeFilters.rating === rating }]"
						@click="setActiveFilter('rating', rating)">
						{{ rating }}
					</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import api from '@/utils/api.js'
	import {
		baseConfig
	} from '@/utils/request.js';
	// --- 状态数据 ---
	const searchQuery = ref('');
	const isTyping = ref(false); // 控制搜索建议/结果页面的显示

	const searchHistory = ref([]);
	const getFullImageUrl = (url) => {
		if (url == '') {
			return '/static/logo.jpg'
		} else {
			return baseConfig.baseURL + '/api/images/' + url;
		}
	};
	const hotSearches = ref([{
			text: 'VMware',
			color: 'red'
		},
		{
			text: 'Anaconda',
			color: 'blue'
		},
		{
			text: 'Chrome',
			color: 'green'
		},
		{
			text: 'IDEA',
			color: 'purple'
		},
		{
			text: 'apifox',
			color: 'orange'
		},
		{
			text: 'WPS',
			color: 'pink'
		},
		{
			text: '迅雷',
			color: 'indigo'
		},
		{
			text: 'Steam',
			color: 'teal'
		},
	]);

	const suggestions = ref([]);

	const searchResults = ref([]);

	// const filterOptions = ref({
	// 	types: ['全部', '办公软件', '图像处理', '系统工具'],
	// 	sizes: ['全部', '小于100MB', '100MB-1GB', '大于1GB'],
	// 	ratings: ['全部', '4.5分以上', '4.0分以上', '3.5分以上'],
	// });

	// const activeFilters = ref({
	// 	type: '全部',
	// 	size: '全部',
	// 	rating: '全部',
	// });


	// --- 方法 ---

	// 模拟搜索和建议逻辑
	const onInput = (e) => {
		const value = e.detail.value.trim();
		searchQuery.value = value;

		// if (value.length > 0) {
		// 	isTyping.value = true;
		// 	// 模拟搜索建议 API 调用
		// 	suggestions.value = [
		// 		`${value} 2024`,
		// 		`${value} CC`,
		// 		`${value} Elements`
		// 	].filter(s => s.toLowerCase().includes(value.toLowerCase()));
		// } else {
		// 	isTyping.value = false;
		// 	suggestions.value = [];
		// }
	};

	const handleSearch = async () => {
		if (searchQuery.value === '') return;
		isTyping.value = false;
		const result = await api.app.getListBytitle(searchQuery.value)
		searchResults.value = result.records
		if (!searchHistory.value.includes(searchQuery.value)) {
			searchHistory.value.unshift(searchQuery.value);
		}
	};

	const selectSuggestion = (suggestion) => {
		searchQuery.value = suggestion;
		handleSearch();
	};

	// const clearSearch = () => {
	// 	searchQuery.value = '';
	// 	isTyping.value = false;
	// 	suggestions.value = [];
	// 	searchResults.value = []; 
	// };

	const clearHistory = () => {
		searchHistory.value = [];
	};

	const removeHistory = (index) => {
		searchHistory.value.splice(index, 1);
	};

	const goToDetail = (id) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		});
	};

	const setActiveFilter = (filterKey, value) => {
		activeFilters.value[filterKey] = value;
		// TODO: 触发搜索或结果过滤
		console.log('筛选条件变更:', activeFilters.value);
	};

	// 工具函数：获取标签的样式类
	const getTagClass = (color) => {
		const classMap = {
			purple: 'tag-purple',
			orange: 'tag-orange',
			blue: 'tag-blue',
			green: 'tag-green',
		};
		return classMap[color] || 'tag-default';
	};

	// 工具函数：获取热门标签的样式类
	const getHotTagClass = (color) => {
		const classMap = {
			red: 'hot-tag-red',
			blue: 'hot-tag-blue',
			green: 'hot-tag-green',
			purple: 'hot-tag-purple',
			orange: 'hot-tag-orange',
			pink: 'hot-tag-pink',
			indigo: 'hot-tag-indigo',
			teal: 'hot-tag-teal',
		};
		return classMap[color] || 'hot-tag-default';
	};
</script>

<style scoped>
	/* --- 基础和布局 --- */
	/* .container {} */

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1f2937;
	}


	/* --- 搜索栏 --- */
	.search-bar {
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	}

	.search-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24rpx;
	}


	.search-input-wrapper {
		background-color: #f3f4f6;
		border-radius: 24rpx;
		padding: 16rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12rpx;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		color: #374151;
		height: 100%;
	}

	.input-icon-left,
	.input-icon-right {
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
	}

	.input-icon-left {
		left: 24rpx;
	}

	.input-icon-right {
		right: 24rpx;
	}

	.search-icon,
	.clear-icon {
		color: #9ca3af;
	}

	.search-button {
		color: #4f46e5;
		font-weight: 500;
		font-size: 30rpx;
		background: none;
		padding: 0;
		line-height: 1.5;
	}

	.search-button::after {
		border: none;
	}


	/* --- 搜索建议 --- */
	.search-suggestions {
		background-color: #ffffff;
		border-bottom: 1rpx solid #f3f4f6;
	}

	.suggestion-list {
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
	}

	.suggestion-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24rpx;
		padding: 16rpx 0;
	}

	.suggestion-icon {
		color: #9ca3af;
		font-size: 28rpx;
	}

	.suggestion-text {
		color: #374151;
		font-size: 28rpx;
	}


	/* --- 搜索结果 --- */
	.search-results-section {
		padding: 30rpx;
	}

	.results-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.result-count {
		font-size: 28rpx;
		color: #6b7280;
	}

	/* .results-list {
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	} */

	.search-result-card {
		background-color: #ffffff;
		border-radius: 32rpx;
		padding: 30rpx;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		transition: transform 0.2s ease;
	}

	.result-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32rpx;
	}

	.logo-wrapper {
		width: 128rpx;
		height: 128rpx;
		border-radius: 32rpx;
		flex-shrink: 0;
	}

	.result-details {
		display: flex;
		flex-direction: column;
	}


	.result-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #1f2937;
		display: block;
	}

	.result-desc {
		font-size: 14px;
		color: #6b7280;
		margin-top: 8rpx;
	}


	.info-group {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32rpx;
		margin: 5rpx 0;

	}

	.extra-info-text {
		font-size: 14px;
		color: #9ca3af;
	}

	.tag-list {
		display: flex;
		flex-direction: row;
		gap: 16rpx;
	}

	.tag-item {
		padding: 4rpx 16rpx;
		border-radius: 9999rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	/* 结果标签颜色 */
	.tag-purple {
		background-color: #f3e8ff;
		color: #9333ea;
	}

	.tag-orange {
		background-color: #ffedd5;
		color: #f97316;
	}

	.tag-blue {
		background-color: #e0f2fe;
		color: #2563eb;
	}

	.tag-green {
		background-color: #d1fae5;
		color: #059669;
	}



	/* --- 热门搜索 --- */
	.hot-searches-section {
		padding: 30rpx;
	}

	.hot-tag-list {
		margin-top: 24rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
	}

	.hot-tag {
		padding: 16rpx 32rpx;
		border-radius: 9999rpx;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	/* 热门标签颜色 */
	.hot-tag-red {
		background-color: #fee2e2;
		color: #dc2626;
	}

	.hot-tag-blue {
		background-color: #e0f2fe;
		color: #2563eb;
	}

	.hot-tag-green {
		background-color: #d1fae5;
		color: #059669;
	}

	.hot-tag-purple {
		background-color: #f3e8ff;
		color: #9333ea;
	}

	.hot-tag-orange {
		background-color: #ffedd5;
		color: #f97316;
	}

	.hot-tag-pink {
		background-color: #fce7f3;
		color: #ec4899;
	}

	.hot-tag-indigo {
		background-color: #eef2ff;
		color: #4f46e5;
	}

	.hot-tag-teal {
		background-color: #ccfbf1;
		color: #0d9488;
	}


	/* --- 搜索历史 --- */
	.history-section {
		padding: 30rpx;
	}

	.history-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.clear-history-button {
		font-size: 28rpx;
		color: #6b7280;
		background: none;
		padding: 0;
		line-height: 1.5;
		border: none;
	}

	.clear-history-button::after {
		border: none;
	}

	.history-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.history-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.history-text-group {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24rpx;
	}

	.history-icon,
	.remove-icon {
		color: #9ca3af;
		font-size: 28rpx;
	}

	.history-text {
		color: #374151;
		font-size: 28rpx;
	}


	/* --- 搜索筛选 --- */
	/* 	.filter-section {
		padding: 30rpx;
	}

	.filter-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 24rpx;
	}

	.filter-group {
		margin-bottom: 32rpx;
	}

	.filter-group-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #4b5563;
		margin-bottom: 16rpx;
		display: block;
	}

	.filter-options-list {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.filter-option-tag {
		padding: 8rpx 24rpx;
		border-radius: 9999rpx;
		font-size: 28rpx;
		color: #4b5563;
		background-color: #f3f4f6;
		font-weight: 500;
	}

	.filter-option-tag.active-tag {
		background-color: #eef2ff;
		color: #4f46e5;
	} */
</style>